<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <!-- playground-fold-end -->

    <ui5-page style="height: 500px" background-design="Solid">
        <ui5-bar design="Header" slot="header">
            <ui5-button design="Transparent" icon="home" tooltip="Go home" slot="startContent"></ui5-button>
            <ui5-label slot="startContent">Title</ui5-label>
            <ui5-button design="Transparent" icon="action-settings" tooltip="Go to settings"
                slot="endContent"></ui5-button>
        </ui5-bar>
        <div>
            <p class="content-paragraph">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Turpis massa sed elementum tempus egestas sed sed risus pretium. Eget nullam non
                nisi est sit amet facilisis. Imperdiet dui accumsan sit amet nulla facilisi morbi. Sem viverra aliquet
                eget sit amet tellus cras adipiscing. Faucibus purus in massa tempor nec. Egestas quis ipsum suspendisse
                ultrices gravida dictum. Amet facilisis magna etiam tempor. Sapien et ligula ullamcorper malesuada proin
                libero nunc consequat. Ac orci phasellus egestas tellus. Quis imperdiet massa tincidunt nunc.
            </p>
            <p class="content-paragraph">
                Amet consectetur adipiscing elit duis tristique. Tortor condimentum lacinia quis vel eros. Elit sed
                vulputate mi sit amet mauris commodo quis imperdiet. Sed nisi lacus sed viverra tellus in hac habitasse.
                Praesent tristique magna sit amet purus gravida quis blandit. Magnis dis parturient montes nascetur
                ridiculus. Sit amet nulla facilisi morbi tempus iaculis urna id. Senectus et netus et malesuada fames.
                Faucibus ornare suspendisse sed nisi lacus sed. Facilisis volutpat est velit egestas dui id ornare arcu
                odio. In tellus integer feugiat scelerisque. Eu turpis egestas pretium aenean pharetra magna. Integer
                enim neque volutpat ac tincidunt vitae semper quis lectus.
            </p>
            <p class="content-paragraph">
                Sodales ut eu sem integer. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Tellus rutrum
                tellus pellentesque eu tincidunt tortor. Etiam tempor orci eu lobortis elementum nibh. Velit laoreet id
                donec ultrices tincidunt arcu non sodales. Scelerisque felis imperdiet proin fermentum leo vel orci
                porta non. Odio ut sem nulla pharetra diam sit amet nisl. Semper auctor neque vitae tempus quam
                pellentesque nec nam aliquam. Donec enim diam vulputate ut pharetra sit. Posuere ac ut consequat semper
                viverra nam libero. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Aliquam eleifend
                mi in nulla posuere sollicitudin aliquam ultrices.
            </p>
        </div>
        <ui5-bar design="FloatingFooter" slot="footer">
            <ui5-button design="Positive" slot="endContent">Agree</ui5-button>
            <ui5-button design="Negative" slot="endContent">Decline</ui5-button>
            <ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
        </ui5-bar>
    </ui5-page>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
